<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <functional-slot-wrapper>
                <template v-slot:header="slotProps">
                    <h1>Header Slot {{slotProps.a}}</h1>
                </template>
                <template v-slot:body="slotProps">
                    <h2>body Slot {{slotProps.b}}</h2>
                </template>
                <template v-slot:footer>
                    <h3>Footer Slot</h3>
                </template>
            </functional-slot-wrapper>
        </div>
        <script src="vue.js"></script>
        <script>
        Vue.component('FunctionalSlotWrapper',{
            functional:true,
            render(createElement,context){
                console.log(context)
                const {data,$slots,scopedSlots}= context;
                //console.log(scopedSlots)
                //通过slots方法执行可以返回一个对象，对象里包含了普通插槽
                //普通插槽就是静态的虚拟DOM
                //$slots本身就是虚拟DOM
                //const footer = slots().footer;
                //因为作用域插槽需要接收属性对象返回虚拟DOM，所以它们都是函数
                const header = scopedSlots.header({a:100});
                const body = scopedSlots.body({b:200});
                //const footer = scopedSlots.footer({});
                const footer = context.$slots.footer;
                return createElement('div',data,[
                    footer,
                    header,
                    body
                ]);
            }
        });
        var vm = new Vue({
            el:'#app',
           
        });
    </script>
    </body>
</html>